<template>
  <div class="common-layout">
    <el-container>
      <el-header height="80px" style="background-color: white;border-bottom: 2px solid green">
        <div style="width: 1200px;margin: 0 auto;">
          <img src="/imgs/XiangJuLogo.jpg" style="width: 140px;height: 100px;position: relative;top: 10px;right: 600px">
        </div>
      </el-header>
      <el-main>
        <div id="main-div">
          <el-card style="width: 545px;height: 432px;margin: 60px auto">
            <h1>用户注册</h1>
            <el-form label-width="80px" style="margin-top: 60px;width: 430px">
              <el-form-item>
                <el-input type="text" placeholder="请输入用户名" :prefix-icon="User" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input type="text" placeholder="请输入昵称" v-model="user.nickname"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="success" round @click="reg()">注册</el-button>
          </el-card>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup>

import {ref} from "vue";
import qs from 'qs';
import axios from 'axios';
import router from "@/router";
const user=ref({username:"",password:"",nickname:""});
const reg = ()=>{
  let data = qs.stringify(user.value);

  axios.post('http://localhost:8080/v1/users/reg',data)
      .then((response)=>{
        if (response.data.code==1){
          router.push('/login');
        }else {
          alert(response.data.msg);
        }
      })
}
</script>
<style scoped>
#main-div {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  height: 706px;
  background-size: cover; /*设置背景图片为封面*/
}

</style>